<!DOCTYPE HTML>
<html manifest="manifest.appcache">
<head>
<meta charset="UTF-8">
<title>MEW mobile</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="jquery.mobile-1.0.min.css" />
<link rel="stylesheet" href="index.css" />
<script src="jquery.js"></script>
<script src="index.js"></script>
<script src="jquery.mobile-1.0.min.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" sizes="80x80" href="icons/icon80.png">
<link rel="apple-touch-icon" href="images/icon57.png" sizes="57x57">
<link rel="apple-touch-icon" href="images/icon114.png" sizes="114x114">
<link rel="apple-touch-icon" href="images/icon72.png" sizes="72x72">
<link rel="apple-touch-icon-precomposed" sizes="android-only" href="images/icon57.png">
</head>

<body>

<div data-role="page" id="home">

  <div data-role="content">
    <p><img src="../images/logo.png" alt="MEW Logo" width="277" height="92" align="middle"></p>
    <h2>وزارة الكهرباء والماء</h2>		<!-- Ministry of Electricity and Water -->
    <p><img src="../images/headquarters300.jpg" alt="headquarters" width="300" height="180" align="middle"></p>
  </div>
  
  <div data-role="footer" data-position="fixed" data-id="toolbar">
    <div data-role="navbar">
      <ul>
        <li><a class="ui-btn-active" href="#home" data-icon="home" data-transition="fade">منزل</a></li>			<!-- Home -->
        <li><a href="#status-request" data-icon="info" data-transition="fade">حالة طلب</a></li>					<!-- Status Request -->
        <li><a href="#signature-provision" data-icon="check" data-transition="fade">توفير التوقيع</a></li>		<!-- Signature Provision -->
        <li><a href="#application-form" data-icon="grid" data-transition="fade">نموذج الطلب</a></li>			<!-- Application Form -->
      </ul>
    </div>
  </div>
  
</div>

<div data-role="page" id="status-request">

  <div data-role="header">
    <h1>حالة طلب</h1>
  </div>
  
  <div data-role="content">
	<form action="request.php" method="post" data-transition="none">

		<div data-role="fieldcontain">
		 <label for="applicationNumber">رقـــم الطلب:</label>
		 <input type="text" name="applicationNumber" id="applicationNumber" value="133" required /><br/>
		 <label for="ownerPhone">رقم الهاتف:</label>
		 <input type="text" name="ownerPhone" id="ownerPhone" value="66486696" disabled="disabled" />
		 <input type="hidden" name="requestFor" value="status">		 
		</div>

		<input type="submit" value="Send" data-theme="a">

	</form>
  </div>
  
  <div data-role="footer" data-position="fixed" data-id="toolbar">
    <div data-role="navbar">
      <ul>
        <li><a href="#home" data-icon="home" data-transition="fade">منزل</a></li>
        <li><a class="ui-btn-active" href="#status-request" data-icon="info" data-transition="fade">حالة طلب</a></li>
        <li><a href="#signature-provision" data-icon="check" data-transition="fade">توفير التوقيع</a></li>
        <li><a href="#application-form" data-icon="grid" data-transition="fade">نموذج الطلب</a></li>
      </ul>
    </div>
  </div>
  
</div>

<div data-role="page" id="signature-provision">

  <div data-role="header">
    <h1>توفير التوقيع</h1>
  </div>
  
  <div data-role="content">
	<form action="request.php" method="post" data-transition="none">

		<div data-role="fieldcontain">
		 <label for="applicationNumber">رقـــم الطلب:</label>
		 <input type="text" name="applicationNumber" id="applicationNumber" value="2/12345" required /><br/>
		 <label for="ownerPhone">رقم الهاتف:</label>
		 <input type="text" name="ownerPhone" id="ownerPhone" value="66486696" readonly="readonly" />
		 <label for="setSignature">Set Signature</label>
		 <input type="checkbox" name="setSignature" id="setSignature" checked  data-mini="true" />
		 <input type="hidden" name="requestFor" value="signature">
		</div>

		<input type="submit" value="Send" data-theme="a">

	</form>
  </div>
  
  <div data-role="footer" data-position="fixed" data-id="toolbar">
    <div data-role="navbar">
      <ul>
        <li><a href="#home" data-icon="home" data-transition="fade">منزل</a></li>
        <li><a href="#status-request" data-icon="info" data-transition="fade">حالة طلب</a></li>
        <li><a class="ui-btn-active" href="#signature-provision" data-icon="check" data-transition="fade">توفير التوقيع</a></li>
        <li><a href="#application-form" data-icon="grid" data-transition="fade">نموذج الطلب</a></li>
      </ul>
    </div>
  </div>
  
</div>

<div data-role="page" id="application-form">

  <div data-role="header">
    <h1>توفير التوقيع</h1>
  </div>
  
  
  <!-- https://docs.google.com/gview?embedded=true&url=http://tawzee/jetty_proxy.php?reportName=TawzeeApplicationForm&applicationNumber=2/12345&keyFieldValue=2/12345&renderAs=pdf -->
  <!-- https://docs.google.com/gview?embedded=true&url=http%3A%2F%2Ftawzee%2Fjetty_proxy.php%3FreportName%3DTawzeeApplicationForm%26applicationNumber%3D2%2F12345%26keyFieldValue%3D2%2F12345%26renderAs%3Dpdf -->
  
  <div data-role="content">
	<!--form action="../jetty_proxy.php" method="post" data-transition="none"-->
	<form action="request.php" method="post" data-transition="none">
		<script type="text/javascript">
			function getReport(e) {
				var win = window.open();
				$(win.document.head).append('<title>Ministry of Electricity and Water</title>');
				$(win.document.head).append('<link rel="shortcut icon" type="../image/vnd.microsoft.icon" href="favicon.ico" />');
				//var url = encodeURI("http://" + location.host + "/jetty_proxy.php?reportName=TawzeeApplicationForm&applicationNumber=" + $('#applicationNumberForm').val() + "&keyFieldValue=" + $('#applicationNumberForm').val() + "&renderAs=pdf");
				//var src = "http://docs.google.com/gview?embedded=true&url=" + url;
				//var src = "http://" + location.host + "/jetty_proxy.php?reportName=TawzeeApplicationForm&applicationNumber=" + $('#applicationNumber').val() + "&keyFieldValue=" + $('#applicationNumber').val() + "&renderAs=pdf";
				var src = "http://" + location.host + "/phone/phone_jetty_proxy.php?applicationNumber=" + $('#applicationNumberForm').val() + "&ownerPhone=" + $('#ownerPhone').val() + "&requestFor=" + $('#requestFor').val();
				$(win.document.body).append('<iframe width="100%" height="100%" src="' + src + '"></iframe>');
				//$(win.document.body).append('<embed width="100%" height="100%" name="plugin" src="' + src + '" type="application/pdf">');
				//$(win.document.body).append('<object width="100%" height="100%" name="plugin" data="' + src + '" type="application/pdf"></object>');
				
			}
		</script>

		<div data-role="fieldcontain">
		 <label for="applicationNumber">رقـــم الطلب:</label>
		 <input type="text" name="applicationNumber" id="applicationNumberForm" value="2/12345" required /><br/>
		 <label for="ownerPhone">رقم الهاتف:</label>
		 <input type="text" name="ownerPhone" id="ownerPhone" value="66486696" disabled="disabled" />
		 <input type="hidden" name="keyFieldValue" id="keyFieldValue" value="2/12345"/>
		 <input type="hidden" name="reportName" id="reportName" value="TawzeeApplicationForm"/>
		 <input type="hidden" name="renderAs" id="renderAs" value="pdf"/>
		 <input type="hidden" id="requestFor" name="requestFor" value="application">
		</div>

		<!--input type="submit" value="Send" data-theme="a"-->
		<input type="submit" value="Send" data-theme="a" onclick="getReport()">

	</form>
  </div>
  
  <div data-role="footer" data-position="fixed" data-id="toolbar">
    <div data-role="navbar">
      <ul>
        <li><a href="#home" data-icon="home" data-transition="fade">منزل</a></li>
        <li><a href="#status-request" data-icon="info" data-transition="fade">حالة طلب</a></li>
        <li><a href="#signature-provision" data-icon="check" data-transition="fade">توفير التوقيع</a></li>
        <li><a class="ui-btn-active" href="#application-form" data-icon="grid" data-transition="fade">نموذج الطلب</a></li>
      </ul>
    </div>
  </div>
  
</div>


</body>
</html>
